<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#wrap{
				width:500px;
				height:400px;
				border:1px solid black;
				margin:50px auto;
				/*设置盒子为弹性容器*/
				display: flex;
				flex-wrap: wrap;
				align-content: center;
				align-content: space-around;
				align-content: space-between;
				justify-content: space-between;
			}
			
			#wrap div{
				width:100px;
				/*height:100px;*/
				height:100px;
				/*background: red;*/
				border:1px solid blue;

			}
			
			#wrap div:nth-of-type(1){
				/*height:200px;*/
				order:10;
			}
			#wrap div:nth-of-type(3){
				/*height:200px;*/
				order:-1;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>
